import { Link, Outlet } from "react-router";
import Panel from "@/components/Panel";

const MENUS = [
  { title: "Actions", components: [{ title: "Buttons", path: "/components/buttons" }] },
  {
    title: "Data Display",
    components: [
      { title: "Avatars", path: "/components/avatars" },
      { title: "Lists", path: "/components/lists" },
    ],
  },
  {
    title: "Navigation",
    components: [{ title: "Menu", path: "/components/menus" }],
  },
  {
    title: "Data Input",
    components: [{ title: "Inputs", path: "/components/inputs" }],
  },
];

export default function CLayout() {
  return (
    <div className="flex gap-4">
      <div className="w-64 flex-none">
        {MENUS.map((menu) => (
          <div key={menu.title}>
            <h2 className="text-lg font-bold">{menu.title}</h2>
            <div className="flex flex-wrap gap-2">
              {menu.components.map((component) => (
                <Link key={component.title} to={component.path} className="btn btn-sm btn-primary">
                  {component.title}
                </Link>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div className="grow p-4">
        <Panel className="bg-white">
          <Outlet />
        </Panel>
      </div>
    </div>
  );
}

// TODO: Menu without padding and border radius
